<template>
  <view class="goods-card">
    <view class="img-box">
      <view class="play">
        <u-icon name="play-right-fill" color="#fff" size="40rpx"></u-icon>
      </view>
      <u-image
        width="342rpx"
        :src="data.img"
        mode="widthFix"
        height="auto"
      ></u-image>
    </view>
    <view class="p-10">
      <view class="ellipsis-2 text-12">
        转为老人设计食品,安全无添加计食品,安全无添加计食品,安全无添加
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.goods-card {
  width: 342rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background: #fff;

  box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
  margin-bottom: 18rpx;
  .img-box {
    position: relative;
    width: fit-content;
    height: fit-content;
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      border: 1rpx solid rgba(255, 255, 255, 0.5);
      background: rgba(0, 0, 0, 0.3);
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
